<template>
  <div>
    <div>
      <el-form class="form-container" :model="form">
        <el-form-item label="关键字" label-width="60px" style="width: 280px;" inline>
          <el-input placeholder="请输入角色名称关键字" v-model="form.keyword"></el-input>
        </el-form-item>
        <el-form-item label="状态" label-width="60px">
          <el-radio-group v-model="form.status">
            <el-radio-button label="不限" value="0"/>
            <el-radio-button label="正常" value="1"/>
            <el-radio-button label="停用" value="2"/>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <div style="text-align: right;margin-bottom: 2px;">
      <el-button type="primary" :icon="Plus" title="创建角色" @click="showCreateDialog"></el-button>
    </div>
    <el-table :data="tableData" stripe border style="width: 100%" class="el-table" :highlight-current-row="true"
              empty-text="未查询到任何角色数据">
      <el-table-column label="序号" header-align="center" width="60" align="right">
        <template #default="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="nameZH" label="角色名称" header-align="center" width="100"/>
      <el-table-column prop="code" label="角色编码" header-align="center" width="100"/>
      <el-table-column prop="maxCount" label="最大用户数" header-align="center" width="100"/>
      <el-table-column prop="createTime" label="创建时间" header-align="center" width="100"/>
      <el-table-column prop="status" label="状态" header-align="center" align="center" width="100">
        <template #default="scope">
          <span v-if="1==scope.row.status">
            <span style="color: blue">使用中</span>
          </span>
          <span v-else-if="2==scope.row.status">
            <span style="color: orangered">已停用</span>
          </span>
          <span v-else>
            <span style="color: gold;">未知</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="roles" label="菜单" header-align="center">
        <template #default="scope">
          <el-tree-select
              v-model="scope.row.menus"
              :data="menus"
              multiple
              :render-after-expand="false"
              show-checkbox
              style="width: 240px"
              :collapse-tags="false"
              collapse-tags-tooltip
              tag-type="info"
              class="single-tag-tree-select"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" header-align="center" width="200">
        <template #default="scope">
          <el-button type="info" :icon="ZoomIn" title="详情" color="green"
                     @click="showDetailsDialog(scope.$index)"></el-button>
          <el-button type="primary" :icon="Edit" title="修改" @click="showModifyDialog(scope.$index)"></el-button>
          <el-button type="danger" :icon="Delete" title="删除" @click="deleteStudent(scope.$index)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <PaginationUI :total="100"></PaginationUI>
    <!-- 创建角色对话框 -->
    <CreateDialog ref="createDialog"></CreateDialog>
    <!-- 修改角色对话框 -->
    <ModifyDialog ref="modifyDialog"></ModifyDialog>
    <!-- 显示角色详细信息-->
    <DetailsDialog ref="detailsDialog"></DetailsDialog>
    <!-- 角色设置对话框 -->
    <RoleSettings ref="roleSettings" @reset-roles="restRoles"></RoleSettings>
  </div>
</template>

<script setup>
//导入图标
import {Delete, Edit, Plus, ZoomIn} from '@element-plus/icons-vue';
import {ref} from 'vue';
import {ElMessage, ElMessageBox} from 'element-plus'
//创建角色对话框
import CreateDialog from './CreateDialog.vue';
//修改角色对话框
import ModifyDialog from './ModifyDialog.vue';
//显示角色详细信息
import DetailsDialog from './DetailsDialog.vue';
//导入分页查询的控件
import PaginationUI from "@views/common/PaginationUI.vue"

const menus = [
  {
    value: '1',
    label: '用户管理',
    children: [
      {
        value: '1-1',
        label: '用户列表',
      },
      {
        value: '1-2',
        label: '个人信息',
      },
      {
        value: '1-3',
        label: '修改密码',
      }
    ],
  },
  {
    value: '2',
    label: '角色管理',
    children: [
      {
        value: '2-1',
        label: '角色列表',
      },
      {
        value: '2-2',
        label: '角色菜单',
      }
    ],
  },
  {
    value: '3',
    label: '菜单管理',
    children: [
      {
        value: '3-1',
        label: '菜单列表',
      },
      {
        value: '3-2',
        label: '菜单权限',
      }
    ],
  },
  {
    value: '4',
    label: '商品分类管理',
    children: [
      {
        value: '4-1',
        label: '分类列表',
      },
      {
        value: '4-2',
        label: '添加分类',
      },
      {
        value: '4-3',
        label: '分类属性',
      }
    ],
  },
  {
    value: '5',
    label: '订单管理',
    children: [
      {
        value: '5-1',
        label: '订单列表',
      },
      {
        value: '5-2',
        label: '订单详情',
      },
      {
        value: '5-3',
        label: '订单状态',
      }
    ],
  },
  {
    value: '6',
    label: '评论管理',
    children: [
      {
        value: '6-1',
        label: '评论列表',
      },
      {
        value: '6-2',
        label: '评论审核',
      },
      {
        value: '6-3',
        label: '评论回复',
      }
    ],
  }
]
//查询表单响应数据
const form = ref({
  status: '0',
  keyword: ''
});
const tableData = ref([
  {
    roleId: 1,
    nameZH: '商品管理员',
    nameEN: 'ProductAdmin',
    code: 'R001',
    maxCount: 10,
    status: 1,
    createTime: '2025-04-01 10:23:00',
    menus: ['1-1', '1-2', '1-3']
  },
  {
    roleId: 2,
    nameZH: '订单管理员',
    nameEN: 'OrderAdmin',
    code: 'R002',
    maxCount: 5,
    status: 1,
    createTime: '2025-04-02 09:15:30',
    menus: ['5-1', '5-2', '5-3']
  },
  {
    roleId: 3,
    nameZH: '用户管理员',
    nameEN: 'UserAdmin',
    code: 'R003',
    maxCount: 3,
    status: 1,
    createTime: '2025-04-03 14:45:22',
    menus: ['1-1', '1-2', '1-3', '2-1', '2-2']
  },
  {
    roleId: 4,
    nameZH: '系统管理员',
    nameEN: 'SystemAdmin',
    code: 'R004',
    maxCount: 1,
    status: 1,
    createTime: '2025-04-04 08:30:10',
    menus: ['1-1', '1-2', '1-3', '2-1', '2-2', '3-1', '3-2', '4-1', '4-2', '4-3', '5-1', '5-2', '5-3', '6-1', '6-2', '6-3']
  },
  {
    roleId: 5,
    nameZH: '评论审核员',
    nameEN: 'CommentAuditor',
    code: 'R005',
    maxCount: 8,
    status: 2,
    createTime: '2025-04-05 11:20:45',
    menus: ['6-1', '6-2', '6-3']
  },
  {
    roleId: 6,
    nameZH: '分类管理员',
    nameEN: 'CategoryAdmin',
    code: 'R006',
    maxCount: 4,
    status: 1,
    createTime: '2025-04-06 13:50:12',
    menus: ['4-1', '4-2', '4-3']
  },
  {
    roleId: 7,
    nameZH: '菜单管理员',
    nameEN: 'MenuAdmin',
    code: 'R007',
    maxCount: 2,
    status: 1,
    createTime: '2025-04-07 15:40:33',
    menus: ['3-1', '3-2']
  },
  {
    roleId: 8,
    nameZH: '超级管理员',
    nameEN: 'SuperAdmin',
    code: 'R008',
    maxCount: 1,
    status: 1,
    createTime: '2025-04-08 07:25:18',
    menus: ['1-1', '1-2', '1-3', '2-1', '2-2', '3-1', '3-2', '4-1', '4-2', '4-3', '5-1', '5-2', '5-3', '6-1', '6-2', '6-3']
  },
  {
    roleId: 9,
    nameZH: '财务管理员',
    nameEN: 'FinanceAdmin',
    code: 'R009',
    maxCount: 3,
    status: 2,
    createTime: '2025-04-09 16:35:55',
    menus: ['5-1', '5-2', '5-3']
  },
  {
    roleId: 10,
    nameZH: '客服专员',
    nameEN: 'CustomerService',
    code: 'R010',
    maxCount: 15,
    status: 1,
    createTime: '2025-04-10 12:10:40',
    menus: ['1-2', '6-1', '6-3']
  }
]);
// ... existing code ...
// ... existing code ...
// ... existing code ...
let createDialog = ref(null);
let modifyDialog = ref(null);
let detailsDialog = ref(null);

//打开删除角色对话框
const deleteStudent = (rowIndex) => {
  let student = tableData.value[rowIndex];
  ElMessageBox.confirm(`确认要删除角色【${student.name}】的信息吗?`, '删除角色',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    // 角色点击了“确定”
    tableData.value.splice(rowIndex, 1);
    ElMessage({message: '删除成功', type: 'success'});
  })
      .catch(() => {
        // 角色点击了“取消”
        ElMessage({message: '已取消删除', type: 'info'});
      });
}
//打开修改角色对话框
const showModifyDialog = (rowIndex) => {
  modifyDialog.value.dialogVisible = true;
  modifyDialog.value.form = tableData.value[rowIndex];
}
//打开显示详细信息对话框
const showDetailsDialog = (rowIndex) => {
  detailsDialog.value.dialogVisible = true;
  detailsDialog.value.student = tableData.rowIndex[rowIndex];
}
//打开创建角色对话框
const showCreateDialog = () => {
  createDialog.value.dialogVisible = true;
}
</script>
<style scoped>
.form-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;

}

.single-tag-tree-select .el-tree-select__tags {
  white-space: normal !important;
  display: flex;
  flex-direction: column;
}

.single-tag-tree-select .el-tree-select__tags .el-tag {
  margin: 2px 0 !important;
}
</style>